<!-- 英文学习 -->
<template>
	<view class="display">
		<view class="hd">
			<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 100px"></uv-text>
		</view>
		<view class="item uv-flex-row" v-for="(item,index) in typing.content" :key="index" style="align-items: center;">
			<template v-if="typing.current == index || (progress>=100 && index == typing.current-1)">
				<text style="color: #fff;">{{desc(item)}}</text>
				<text style="color: #fff;width: 50px;height: 50px;line-height: 50px;border: 1px solid #fff;text-align: center;border-radius: 5px;margin-left: 10px;">{{item}}</text>
			</template>
		</view>
	</view>
	<view class="progress">
		<progress-line :percentage="progress" @end="courseComplete(completePopup)" />
	</view>
	<popup-complete ref="completePopup" />
</template>
<script setup>
	import { defineComponent, ref } from 'vue';
	import { keyboardList } from '@/common/js/keyboard.js';
	import useTyping from '../hooks/useTypingBASE.js';
	import progressLine from './progress-line.vue';
	import popupComplete from './popup-complete.vue';
	defineComponent({ progressLine, popupComplete })
	const completePopup = ref(null);
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { typing, desc, progress, courseComplete } = useTyping(() => {
		return props.cont;
	});
</script>
<style scoped lang="scss">
	@import '../common/style.scss';
	.item {
		justify-content: center;
	}
</style>